<template>
  <div>
    <el-button type="text" @click="open">点击打开 Message Box</el-button>
    <vxe-table
      border
      resizable
      height="300"
      :scroll-y="{ enabled: false }"
      :span-method="mergeRowMethod"
      :data="tableData3"
    >
      <vxe-column field="key" title="Key"></vxe-column>
      <vxe-column field="content" title="Translate"></vxe-column>
      <vxe-column field="language" title="Language"></vxe-column>
      <vxe-column field="name" title="名称"></vxe-column>
      <vxe-column field="age" title="年龄"></vxe-column>
      <vxe-column field="sex" title="性别"></vxe-column>
      <vxe-column field="hobby" title="爱好"></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import {showLoading,hideLoading} from "../utils/loading"
export default {
  data() {
    return {
      tableData3: [
        {
          id: 10001,
          key: "app.label.name",
          content: "6分",
          language: "我是张三的性格方面描述",
          name: "",
          age: "",
          sex: "",
          hobby: "",
        },
        {
          id: 10001,
          key: "app.label.name",
          content: "6分",
          language: "我是张三的性格方面描述",
          name: "",
          age: "",
          sex: "",
          hobby: "",
        },
        {
          id: 10002,
          key: "app.label.name",
          content: "4分",
          language: "我是李四的性格方面描述",
          name: "",
          age: "",
          sex: "",
          hobby: "",
        },
      ],
    };
  },
  created(){
       
  },
  methods: {
    // 通用行合并函数（将相同多列数据合并为一行）
    mergeRowMethod({ row, _rowIndex, column, visibleData,columnIndex }) {
      console.log(row,columnIndex , "data");
      const fields = ["key"];
      const cellValue = row[column.field];
      const filedsContent = ["content"];
      const cellValueContent = row[column.field];
      const filedsLanguage = ["language"];
      const cellValueLanguage = row[column.field];
      if (cellValue && fields.includes(column.field)) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        if (prevRow && prevRow[column.field] === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.field] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      } else if (cellValueContent && filedsContent.includes(column.field)) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        if (prevRow && prevRow[column.field] === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.field] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      } else if (cellValueLanguage && filedsLanguage.includes(column.field)) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        if (prevRow && prevRow[column.field] === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.field] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      } else if(column.property == "name"){
        if(row.name == "" && columnIndex == 4){
          return {rowspan:0,colspan:4}
        }
      }
    //  只合并6分那两行的，并且不让他们rowspan合并2
    },
    open() {
        this.$alert('<strong style="font-size:18px">这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          type:"success",
          callback: action => {
            showLoading();
          }
        });
        hideLoading();
      }

    
  },
};
</script>

<style>
</style>

